@import "_variables"
@import "_colors/" + $colors
@import "_util"
@import "_mixins"
@import "_extend"
@import "_fonts"

@import "_partial/article"
@import "_partial/actions_mobile"
@import "_partial/footer"
@import "_partial/tooltip"
@import "hubzy_center"
@import "hubzy_left"
@import "hubzy_right"

// Code
@import "_highlight/" + $highlight

* *:before *:after
  box-sizing: border-box
@media (prefers-color-scheme: light) {
  :root {
    --color-background: #fff;
    --color-background-op: rgba(255, 255, 255,0.8);
    --color-footer-mobile-1: #f8fcff;
    --color-footer-mobile-2: #f1f1f1;
    --color-background-code: #edf2f7;
    --color-border: #666666;
    --color-meta: #666666;
    --color-meta-code:#4d4d4d;
    --color-link: rgba(43, 188, 138, 1)
    --color-text: #363533
    --color-accent-3: #666666
    --color-accent-2: #111111
    --color-accent-1: #2bbc8a
    --color-quote: rgba(43, 188, 138, 1)
    --color-scrollbar:rgba(0, 0, 0,.2)
  }
}
@media (prefers-color-scheme: dark){
  :root {
    --color-background: rgb(29, 31, 33);
    --color-background-op: rgba(29, 31, 33,0.8);
    --color-footer-mobile-1: #1d1f21;
    --color-footer-mobile-2: #272b2e;
    --color-background-code: rgb(40, 42, 45)
    --color-border: #908d8d;
    --color-meta: #908d8d;
    --color-meta-code: #c9cacc
    --color-link: rgba(43, 188, 138, 1)
    --color-text: #c9cacc
    --color-accent-3: #cccccc
    --color-accent-2: #eeeeee
    --color-accent-1: #2bbc8a
    --color-quote: rgba(43, 188, 138, 1)
    --color-scrollbar:(rgba(255,255,255,0.2))
  }
}


html
  margin: 0
  padding: 0
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  -webkit-tap-highlight-color:transparent;//方法一
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//方法二
  tap-highlight-color: rgba(0, 0, 0, 0);//方法三

body
  background-color: var(--color-background);
  margin: 0
  .home
    color:  var(--color-text);
    font-display: swap // @stylint ignore
    font-weight: 400
    font-size: $font-size
    font-family: $font-family-body
    line-height: $line-height
    text-rendering: geometricPrecision
    display: flex
    margin: 0

  antialias()

  @extend $base-style
   
.conterDiy
  box-sizing: border-box
  p
    a
      color: var(--color-text);
      text-decoration: revert
      &:hover
       color: var(--color-link);
.content
  #about

    p:first-child
      text-align: justify
      padding: 0.8rem 0
      border-radius: 4px

    p:first-child::after{
      content: '|';
      color: var(--color-text);
      animation: blink 1s infinite;
    }
    @keyframes blink{
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }
    }
  p
    hyphens(auto)
    text-align: justify 
    text-justify: inter-ideograph

  code
    hyphens(manual)

  a
    color: var(--color-text);
    text-decoration: none

    &:hover
      color: var(--color-link);

  a.icon
    background: none
    display: flex
    margin-right: 0.5rem
    i
      display: flex
      align-items: center

    &:hover
      color: var(--color-link);

  h1 a, .h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
    background: none
    color: inherit
    text-decoration: none

  h1 a:hover, .h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
    underline(6px, $color-link)

  h6
    a
      background: none
      color: inherit
      text-decoration: none

  h6
    a:hover
      underline(6px, $color-link)
pre
  overflow-x: auto
  padding: 10px 15px
  padding-bottom: 0
  border: 1px dotted var(--color-border);
  border-radius: 4px
  font-size: 13px
  font-family: $font-family-mono
  line-height: 22px
  -webkit-border-radius: 4px

  code
    display: block
    padding: 0
    border: none

code
  padding: 2px 4px
  margin: 0 2px
  border-radius: 2px
  -webkit-border-radius: 2px
  background-color: var(--color-background-code)

.highlight
  // overflow-x: auto
  margin: 1rem 0
  padding: 0.8rem 0 
  // padding-left: 0.2rem
  border-radius: 4px
  background: var(--color-background-code) 
  color: var(--color-meta-code)
  font-family: $font-family-mono
  -webkit-border-radius: 4px
  position: relative

  figcaption
    margin: -5px 0 5px
    color: var(--color-meta-code)
    font-size: .9em
    transform: scale(1)

    a
      float: right
      color: var(--color-meta-code)
      font-style: italic
      font-size: .8em

      underline(10px, $color-link)

    a:hover
      color: lighten($color-meta-code, 20%)

    &:before
      content: ""
      display: table

    &:after
      clear: both

  &:hover 
    .btn-copy
      opacity: 1

  .btn-copy
    font-size: 1rem
    position: absolute
    right: 2rem
    opacity: 0
    transition: opacity 0.2s ease-in
    cursor: pointer
    margin-top: -2px
    &:hover
      color: var(--color-accent-1)

  pre
    margin: 0
    padding: 0
    border: none
    background: none

  table
    width: auto

  td.gutter
    text-align: right
    opacity: .2

  .line
    height: 22px

.diyIcon
  width 14px
  fill: var(--color-text);
  // margin-top: 2px
  &:hover
    fill:var(--color-link);

.iconlist
  display: flex
  align-items: center
  height: fit-content;
  margin: 0;
  a
    color: var(--color-text);
    &:hover
      color: var(--color-link);
  a.icon
    background: none
    display: flex
    margin-right: 0.5rem
    i
      display: flex
      align-items: center

    &:hover
      color: var(--color-link);

//   /* 设置滚动条的样式 */
.hubzy_left&:hover::-webkit-scrollbar {
  width:6px;
  height 6px;
  transition: all 0.2s;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
   transition: all 0.2s;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:var(--color-scrollbar);
  // -webkit-box-shadow:inset006pxrgba(0,0,0,0);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:var(--color-scrollbar);
}
// /* 滚动条滑块 */
// html:hover ::-webkit-scrollbar-thumb{
//   border-radius:10px;
//   background:var(--color-scrollbar);
//   // background:rgba(255,255,255,1);
//   -webkit-box-shadow:inset006pxrgba(0,0,0,0);
//   border-radius:10px;
  
// }
// html:hover ::-webkit-scrollbar-thumb:window-inactive {
//   background:var(--color-scrollbar);
//   // background:rgba(255,255,255,1);
//   border-radius:10px;
// }


@import "media"




  